<template>
  <div>
    <img :src="imgSrc" alt="">
    <br>
    <a :href="url">Vue.js Evan YOU</a>
    <p>
      {{count}}
    </p>
    <button @click="add">+</button>&nbsp;&nbsp;
    <button @click="dec">-</button>
    <br>
    <br>
    <button @click="addCount(5)">simple+5</button>&nbsp;
    <button @click="count++">简化+1</button>&nbsp;
    <button @click="count--">简化-1</button>&nbsp;
    <br><br>
    <a @click="btn1" href="http://www.baidu.com">去百度 不让去</a>
    <br><br>
    <a @click="btn2(10,$event)" href="http://www.baidu.com">不让去</a>
  </div>
</template>

<script>
export default {
data () {
  return {
    url:'https://cn.vuejs.org/',
    imgSrc:'https://cn.vuejs.org/images/logo.png',
    count:0
  }
},
methods:{
  add(){
    this.count++
  },
  dec(){
    this.count--
  },
  addCount(num){
    this.count+=num;
  },
  btn1(e){
    e.preventDefault();
  },
  btn2(num,e){
    this.count+=num;
    e.preventDefault();
    
  }
}
}
</script>

<style scoped>
div {
  text-align: center;
}
 a{
   text-align: center;
   text-decoration: none;
 }
 img {
   text-align: center;
 }
 p{
   font-size: 80px;
 }
</style>

